#archive-page {
  margin-bottom: @gap * 2;
  .archive {
    position: relative;
    .archive-year {
      font-size: @fontsize_base;
      margin-top: 4em;
      margin-bottom: 1em;
      &:first-child{
        margin-top: 0em;
        padding-top: 0;
      }
      h2 {
        margin-top: 1em;
      }
      a {
        color: @color_text_main;
        text-decoration: none;
      }
    }
    .archive-post {
      a {
        width: 100%;
        display: inline-flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
        align-items: flex-start;
        text-decoration: none;
        &.child{
          padding-left: 2*@gap;
        }
      }
      time {
        color: @color_text_main;
        flex: none;
        font-size: @fontsize_small;
        padding: .5em .5em .5em 3em;
        @media (max-width: @on_phone) {
          padding: .5em .5em .5em 0;
        }
      }
      .title {
        flex: auto;
        padding: .5em;
        font-size: @fontsize_small;
        color: fade(@color_text_main,80%);
        i{
          color: @theme_main;
        }
      }
    }
  }
}
